Non-for-profit website Redesign - RSPCA Australia
Building a meaningful user interface from a clear and deliberate brand voice for a non-for-profit animal welfare website.
TIMELINE
3 weeks
ROLE
Product manager - .....
UX researcher - conducted 3 user interviews based on animal rescue related experience; created a user persona with real pains and needs for further ideation.
UI designer- developed a brand style guide and applied UI elements to responsive hifi mock-ups.
DELIVERABLES
DELIVERABLES
UI style guide, brand voice, information architecture/site map, sketches & wireframes, responsive high-fidelity mock-ups
TOOLS
TOOLS
Figma, InVision, Trello, Miro, Zoom
With the help of 3 other designers, a website brand audit was conducted to assess the current brand direction. A card sorting activity was also used to take an inventory of the navigation items. The goal was to become familiar with the website’s current structure and brand identity.
Current RSPCA Website
Proto Persona
A proto-persona helped us build a hypothetical user image before conducting a user research.
Our goals
Creating a new look RWD and clickable prototype for RSPCA Website to make it more user friendly and make accessing information easier around animal rescue & farm animal welfare, making it more clear to users what support they can get from RSPCA.
People found lost pets and injured animals on the road every day and a thoughtfully-designed website with key info highlighted could help animals reach for help more timely.
A lot of new pet parents are looking for information on how to raise their new pets, have access to useful resources or learn about RSPCA’s adoption policy.
Trello board - task management
As the project manager of the team, setting up a clear timeline and deciding an achievable goal would be a very important first step.
Problem Statement
Our users are looking for a reliable and accurate way to be able to report lost and injured animals and suspicion of animal abuse.
Our users have spent a considerable amount of time trying to locate contact information for the RSPCA website and are frustrated at the lack of prompt responses received from RSPCA. This situation causes stress for both staff and users who are in need of this information in a timely manner.
These are the improvements we aim to make:
-support resources easy to find
-right info is available at the right moment
-contact information is available
-clear label & taxonomy
-clear navigation UI
User Persona
Value Proposition
Having gathered some real evidence and information from our user interviews and analysis, we were able to visualise the real user problem. We found that a user would be stressed and worried if they struggled to find the best place to report potential animal abuse events.
User Flow
Through performing a user flow process, we were able to have a bird-eye view of our product. In order to solve out user's problem. we potentially would offer 3 solutions to our user: to make a phone call, to fill an online report or to speak to an RSPCA staff online to report the incident.
Card sorting
Card sorting helped us find out what users think about the content. That's why we organised our content in this way to suit users' mental models, in a way creating better usability for the product.
Sitemap
The result of the card sorting activity supported us to build a new user-centred structure for the skeleton of the product.
Sketch
We hope users are able to discover the 'report abuse' button easily when they visit the website in order to achieve their goals effortlessly.
Wireframe
Wireframing is an essential step that connects the site's information architecture to its visual design by showing paths between pages.
Responsive wireframing
To create a mobile-friendly website, thinking about how the product may look like in a range of devices and aiming to encourage users to spend more time on the website are the may targets.
UI Style Guide
I created this style guide to make sure that multiple contributors create in a clear and cohesive way that reflects the corporate style and ensures brand consistency with everything from design to writing.
Lowfi-Midfi Prototype
From testings & analysis, users mentioned the position of the CTA button was odd, and the side navigation bar was usually larger. Good aspects were information was easy to locate and flow was simple.
Hifi Homepage - Mobile, Tablet & Desktop
Users were able to achieve goals such as calling RSPCA from the homepage and join RSPCA as a volunteer, however the illustrations on the website/tablet don't look as appealing as they are on mobile. Currently I'm still working on choosing a friendly but slightly serious color scheme to represent the RSPCA, and soon I'll update how this web design works on different devices.
Link to the prototype:
https://www.figma.com/proto/nntb2eZen3na0kONHxwmDE/JoZhou-RSPCA?node-id=34%3A17743&scaling=scale-down-width&page-id=0%3A1&starting-point-node-id=34%3A17743
Project regrets & final thoughts
-What could've been done:
💡Included stakeholder’s voices
💡Strategic use of elements for better usability
💡More cycles of testings & iterations
💡Strategic use of elements for better usability
💡More cycles of testings & iterations
️☑️ Accessible by WatchOS
☑️ AR-implemented adoption procedures
☑️ AR-implemented adoption procedures
